<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-26 15:43:42
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-31 10:33:58
-->
<template>
  <div class="footer-right">
    <div>
      <div class="footer-right-title">
        {{ echartsTitle }}
      </div>
      <div class="footer-right-sel">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{ echartsText }}
            <i class="iconfont icon-xiala"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="typeMoneyChange(item)"
              v-for="item in typeOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{ echartstime }}
            <i class="iconfont icon-xiala"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="typeTimeChange(item)"
              v-for="item in typeTimeOPtions"
              :key="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div id="echarts" v-loading="loading"></div>
  </div>
</template>

<script>
import { trendChart } from "@/api/index";
export default {
  data() {
    return {
      loading: false,
      echartsTitle: "收入趋势图",
      echartsText: "收入",
      echartstime: "周",
      typeMoney: 1,
      typeTime: 1,
      typeOptions: [
        {
          value: 1,
          label: "收入",
        },
        {
          value: 2,
          label: "支出",
        },
      ],
      typeTimeOPtions: [
        {
          value: 1,
          label: "周",
        },
        {
          value: 2,
          label: "月",
        },
        {
          value: 3,
          label: "年",
        },
      ],
      dataTime: [],
    };
  },
  created() {
    this.trendChart();
  },
  mounted() {
    setTimeout(() => {
      this.drawLine();
    }, 1500);
  },
  methods: {
    // 获取echarts
    async trendChart() {
      this.loading = true;
      let res = await trendChart({
        type: this.typeMoney,
        timeUnit: this.typeTime,
      });
      console.log(res);
      this.dataTime = res.dates;
      this.dataPrice = res.totals;
      this.loading = false;
      // trendChart({
      //   type: this.typeMoney,
      //   timeUnit: this.typeTime,
      // }).then((res) => {
      // });
    },
    // echaets 时间
    typeTimeChange(item) {
      this.typeTime = item.value;
      this.echartstime = item.label;
      this.trendChart();
      setTimeout(() => {
        this.drawLine();
      }, 1500);
    },
    // echaets 支出/付出
    typeMoneyChange(item) {
      this.typeMoney = item.value;
      if (item.value == 1) {
        this.echartsText = item.label;
        this.echartsTitle = "收入趋势图";
      } else if (item.value == 2) {
        this.echartsText = item.label;
        this.echartsTitle = "支出趋势图";
      }
      this.trendChart();
      setTimeout(() => {
        this.drawLine();
      }, 500);
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("echarts"));
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.dataTime,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.dataPrice,
              type: "line",
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1267fa", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              itemStyle: {
                normal: {
                  color: "#1267fa",
                  // background: 'linear-gradient(0deg, rgba(18, 103, 250, 0.01) 0%, #1267FA 100%)'
                },
              },
            },
          ],
          grid: {
            left: "20px",
            right: "20px",
            containLabel: true,
          },
        },
        true
      );
    },
  },
};
</script>

<style lang="less" scoped>
.footer-right {
  box-sizing: border-box;
  border-radius: 8px;
  width: 1192px;
  height: 520px;
  background-color: #fff;
  position: relative;
  padding: 14px;
  .footer-right-sel {
    z-index: 200;
    position: absolute;
    top: 24px;
    right: 24px;
    /deep/ .el-select {
      width: 80px;
      input {
        border: none;
      }
    }
  }
  #echarts {
    height: 100%;
  }
}
</style>